<template>
    <div class="bg">
        <div class="content">
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple div">
                        <div class="left">基本信息</div>
                        <div class=right>
                            <el-button 
                                @click="btnClick"
                                type="warning" 
                                plain>
                                签到记录
                            </el-button>
                            <el-button type="primary" plain @click='toRecord'>立即打卡</el-button>
                            <el-button plain @click="reset_record">重置</el-button>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple div2">
                        <div class="up">
                            打卡人<el-input type="text" autocomplete="off" disabled :value=user.username>
                            </el-input>
                        </div>
                        <div class="up">
                            打卡时间
                            <el-input type="text" autocomplete="off" disabled :value=nowTime></el-input>
                            <!-- <el-input type="text" autocomplete="off" disabled :value=moment(new Date()).format('YYYY-MM-DD HH:mm:ss')></el-input> -->
                        </div>
                        <div class="down">健康打卡</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple div3">
                        <div class="location">
                            个人位置
                            <el-select v-model="obj2.select0" slot="prepend" placeholder="个人位置">
                                <el-option label="在校" value="在校"></el-option>
                                <el-option label="在家" value="在家"></el-option>
                                <el-option label="国外" value="国外"></el-option>
                                <el-option label="教学实习" value="教学实习"></el-option>
                                <el-option label="就业实习" value="就业实习"></el-option>
                                <el-option label="旅途中" value="旅途中"></el-option>
                            </el-select>
                        </div>
                        <div class="location2">
                            目前所在城市
                            <el-cascader 
                                v-model="obj2.pca"
                                :options="pca"
                                :props="{ label: 'name', value: 'name' }"
                                @change="change"
                                placeholder="请选择省市">
                            </el-cascader>
                        </div>
                        <!-- 上午打卡 -->
                        <!-- {{obj2}} -->
                        <div class="alt">
                            <ul>
                                <li>
                                    <div>
                                        <div>目前身体状况</div>
                                        <el-radio-group v-model="obj2.radio">
                                        <el-radio label="健康">健康</el-radio>
                                        <el-radio label="有发热咳症状">有发热咳嗽症状</el-radio>
                                        <el-radio label="其他情况">其他情况</el-radio>
                                    </el-radio-group>
                                    </div>
                                </li>
                                <li>
                                    <div>是否因病缺勤</div>
                                    <el-radio-group v-model="obj2.radio2">
                                        <el-radio label="是">是</el-radio>
                                        <el-radio label="否">否</el-radio>
                                    </el-radio-group>
                                </li>
                                <li>
                                    <div>是否接触过疑似或确诊的新型肺炎患者</div>
                                    <el-radio-group v-model="obj2.radio3">
                                        <el-radio label="是">是</el-radio>
                                        <el-radio label="否">否</el-radio>
                                    </el-radio-group>
                                </li>
                                <li>
                                    <div>是否因新冠肺炎就诊住院</div>
                                    <el-radio-group v-model="obj2.radio4">
                                        <el-radio label="是">是</el-radio>
                                        <el-radio label="否">否</el-radio>
                                    </el-radio-group>
                                </li>
                            </ul>
                        </div>
                        <!-- 下午打卡 -->
                        <div class="alt2" style="width: 500;">
                            <ul>
                                <li>
                                    <div>
                                        <span class="star">学习状态</span>
                                        <el-select v-model="obj2.select1" slot="prepend" placeholder="请选择学习状态">
                                            <el-option label="非常良好" value="非常良好"></el-option>
                                            <el-option label="良好" value="良好"></el-option>
                                            <el-option label="一般" value="一般"></el-option>
                                            <el-option label="不好" value="不好"></el-option>
                                            <el-option label="非常不好" value="非常不好"></el-option>
                                        </el-select>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <span class="star">生活状态</span>
                                        <el-select v-model="obj2.select2" slot="prepend" placeholder="请选择学习状态">
                                            <el-option label="非常良好" value="非常良好"></el-option>
                                            <el-option label="良好" value="良好"></el-option>
                                            <el-option label="一般" value="一般"></el-option>
                                            <el-option label="不好" value="不好"></el-option>
                                            <el-option label="非常不好" value="非常不好"></el-option>
                                        </el-select>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <span class="star">交际状态</span>
                                        <el-select v-model="obj2.select3" slot="prepend" placeholder="请选择学习状态">
                                            <el-option label="非常良好" value="非常良好"></el-option>
                                            <el-option label="良好" value="良好"></el-option>
                                            <el-option label="一般" value="一般"></el-option>
                                            <el-option label="不好" value="不好"></el-option>
                                            <el-option label="非常不好" value="非常不好"></el-option>
                                        </el-select>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <span class="star">情感状态</span>
                                        <el-select v-model="obj2.select4" slot="prepend" placeholder="请选择学习状态">
                                            <el-option label="非常良好" value="非常良好"></el-option>
                                            <el-option label="良好" value="良好"></el-option>
                                            <el-option label="一般" value="一般"></el-option>
                                            <el-option label="不好" value="不好"></el-option>
                                            <el-option label="非常不好" value="非常不好"></el-option>
                                        </el-select>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <span class="star">身体状态</span>
                                        <el-select v-model="obj2.select5" slot="prepend" placeholder="请选择学习状态">
                                            <el-option label="非常良好" value="非常良好"></el-option>
                                            <el-option label="良好" value="良好"></el-option>
                                            <el-option label="一般" value="一般"></el-option>
                                            <el-option label="不好" value="不好"></el-option>
                                            <el-option label="非常不好" value="非常不好"></el-option>
                                        </el-select>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import pca from "../../assets/pca.json";
import { mapActions,mapState } from 'vuex';
import moment from "moment";

let id = 0;
export default {
    data() {
        return {
            // tables:[],
            obj2:{
                country: '中国'
            },
            pca,
            props: {
                lazy: true,
                lazyLoad (node, resolve) {
                    const { level } = node;
                    setTimeout(() => {
                        const nodes = Array.from({ length: level + 1 })
                            .map(item => ({
                            value: ++id,
                            label: `选项${id}`,
                            leaf: level >= 2
                            }));
                        // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                        resolve(nodes);
                    }, 1000);
                }
            }
        }
    }, 
    computed: { 
        ...mapState("wuqingyu", ["user","tables"]),
    },
    mounted() {
        this.nowTimes();
    },
    created() {
        var token = localStorage.getItem('token');
        var obj = {
            token
        }
        this.get_name(obj)
        this.nowTimes()
    },
    methods: {
        ...mapActions('wuqingyu', ['get_name']), 
        // 打卡
        toRecord() {
            if(this.obj2.pca && this.obj2.radio && this.obj2.radio2 && this.obj2.radio3 && this.obj2.radio4 && this.obj2.select0 && this.obj2.select1 && this.obj2.select2 && this.obj2.select3 && this.obj2.select4 && this.obj2.select5) {
                alert('打卡成功!');
                this.obj3 = this.obj2
                this.obj_1 = this.obj
                // // 将所选内容清空
                this.obj2 = {}
                // console.log(this.obj3);
            }else {
                alert("请填完所有选项再打卡!")
            }
        },
        // 定义参数
        getPara() {
            this.obj.select0 = this.tables[0];
            this.obj.radio = this.tables[1];
            this.obj.radio2 = this.tables[2];
            this.obj.radio3 = this.tables[3];
            this.obj.radio4 = this.tables[4];
            this.obj.select1 = this.tables[5];
            this.obj.select2 = this.tables[6];
            this.obj.select3 = this.tables[7];
            this.obj.select4 = this.tables[8];
            this.obj.select5 = this.tables[9];
        },
        // 跳转到签到页面
        btnClick() {
            this.$router.push({
                path: "/wuqingyu1/index",
                query: this.obj3
            })
        },
        // 重置按钮
        reset_record() {
            this.obj2 = {}
        },
        nowTimes(){
            this.timeFormate(new Date());
            setInterval(this.nowTimes,1000);
        },
        //显示当前时间（年月日时分秒）
        timeFormate(timeStamp) {
            let year = new Date(timeStamp).getFullYear();
            let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1;
            let date =new Date(timeStamp).getDate() < 10? "0" + new Date(timeStamp).getDate(): new Date(timeStamp).getDate();
            let hh =new Date(timeStamp).getHours() < 10? "0" + new Date(timeStamp).getHours(): new Date(timeStamp).getHours();
            let mm =new Date(timeStamp).getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes();
            let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
            let week = new Date(timeStamp).getDay();
            this.nowTime = year + "-" + month + "-" + date +""+" "+hh+":"+mm+':'+ss ;
        },
        change() {}
    },
};
</script>

<style scoped>
    .alt2 ul li div .star {
        margin-right: 10px;
    }
    .location .el-select {
        width: 100px;
    }
    .alt2 ul li .star::before {
        content: "*";
        color: #f56c6c;
        margin-right: 4px;
    }
    /* 个人位置和选择省市区 */
    .location2 {
        position: absolute;
        top: 5px;
        left: 200px;
    }
    .location, .location2 {
        position: absolute;
        top: 5px;
        display: inline-block;
    }
    /* 个人位置 */
    .el-dropdown {
        vertical-align: top;
    }
    .el-dropdown + .el-dropdown {
        margin-left: 15px;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
    /* 下午打卡 */
    .el-dropdown-link {
        cursor: pointer;
        color: #ccc;
        display: inline-block;
        padding: 5px 0 5px 50px;
        width: 200px;
        border: 1px solid rgb(238, 237, 237);
        margin-left: 10px;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
    .div3 .alt2 li {
        list-style: none;
    }
    .div3 .alt li {
        color: red;
    }
    .div3 .alt li div {
        color: #333;
    }
    .div3 .alt2 {
        position: absolute;
        top: 50px;
        right: 50px;
        width: 400px;
    }
    .div3 .alt {
        position: absolute;
        top: 50px;
        left: 10px;
        width: 500px;
    }
    .div3 .alt li,.div3 .alt2 li {
        margin-top: 30px;
    }

    /* 打卡人，打卡时间 */
    .div2 .down {
        margin-top: 100px;
    }
    .div2 .up {
        width: 260px;
        height: 26px;
        display: inline-block;
        margin-top: 20px;
        margin-left: 20px;
    }
    /* 基本信息栏 */
    .div .right {
        float: right;
    }
    .div .left, .div2 .down {
        float: left;
        font-size: 14px;
        font-weight: 700;
        display: inline-block;
        margin-left: 10px;
    }
    .div3 {
        height: 400px;
        position: relative;
    }
    .div2 {
        height: 140px;
        border-bottom: 2px solid #dcdfe6;
    }
    .div {
        height: 60px;
        line-height: 50px;
        border-bottom: 2px solid #dcdfe6;
    }

    /* 整体 */
    .el-row {
        &:last-child {
        margin-bottom: 0;
        }
    }
    .el-col {
        border-radius: 4px;
    }
    /* .bg-purple {
        border: 1px solid #ccc;
    } */
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .content {
        width: 100%;
        height: 614px;
        background: #fff;
        color: #303133;
        border-radius: 4px;
    }
    .bg {
        background: #eaedf1;
    }
</style>